<template>
	<view>
		<view class='distribution-posters'>
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
			 @change="bindchange" previous-margin="40px" next-margin="40px">
				<block v-for="(item,index) in spreadList" :key="index">
					<swiper-item @longpress='savePosterPath'>
						<!-- #ifdef MP -->
						<image :src="item.poster" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill' />
						<!-- #endif -->
						<!-- #ifndef MP -->
						<image :src="item.wap_poster" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill' />
						<!-- #endif -->
						<!-- <image src="/static/images/join.png" class="slide-image"></image>
						<view class="fontExplain">
								<image src="/static/images/bigCard.png"></image>
						</view> -->
					</swiper-item>
				</block>
			</swiper>
			<!-- #ifdef MP -->
			<view class='keep bg-color' @click='savePosterPath'>保存海报</view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<div class="preserve acea-row row-center-wrapper">
				<div class="line"></div>
				<div class="tip">长按保存图片</div>
				<div class="line"></div>
			</div>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrls: [],
				indicatorDots: false,
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				swiperIndex: 0,
				spreadList: [],
				userInfo: {},
				poster: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权				
				isShowPhoto:true
			};
		},
		onLoad() {
			let that = this;
			if (this.$db.get('userToken')) {				
				this.userSpreadBannerList();			
			} else {
				that.$common.jumpToLogin();
				return;
			}
			
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			userShare();
			return {
				title: this.userInfo.nickname + '-分销海报',
				imageUrl: this.spreadList[0],
				path: '/pages/index/index?spid=' + this.userInfo.uid,
			};
		},
		// #endif
		methods: {
			bindchange(e) {
				let spreadList = this.spreadList;
				this.swiperIndex = e.detail.current;
				this.$set(this, 'poster', spreadList[e.detail.current].pic);
			},
			savePosterPath: function() {
				let that = this;

				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
					that.downloadImageOfMp(that.poster)
					return;
				// #endif
				
				// #ifdef H5
				that.downloadIamge(that.poster, 'image');
				// #endif

			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},			
			downloadImageOfMp (image) {
				let _this = this				
				// #ifdef APP-PLUS || APP-PLUS-NVUE
				uni.downloadFile({
					url: image,
					success (res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								_this.$common.successToShow('保存成功')
							},
							fail() {
								_this.$common.errorToShow('图片保存失败')
							}
						});
					},
					fail () {
						_this.$common.errorToShow('下载失败')
					}
				})
				// #endif
				
				// #ifdef MP
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						// 先下载到本地
						uni.downloadFile({
							url: image,
							success (res) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success() {
										_this.$common.successToShow('保存成功')
									},
									fail() {
										_this.$common.errorToShow('图片保存失败')
									}
								});
							},
							fail () {
								_this.$common.errorToShow('下载失败')
							}
						})
					},
					fail() {
						//console.log('授权失败')
					}
				})
				// #endif
			},			
			userSpreadBannerList: function() {
				let that = this;
				
				let spreadList =  that.$db.get("spreadList");
				let poster = that.$db.get("poster");
				
				if(spreadList && poster){
					that.$set(that, 'spreadList', spreadList);
					that.$set(that, 'poster', poster);
					return;
				}
				that.$common.loadToShow("获取中");
				let data ={}
				// #ifdef MP
					data={
						'type':'routine'
					}
				// #endif
				// #ifndef MP
					data={
						'type':'wechat'
					}				
				// #endif
				that.$api.spreadBanner(data,res=>{

					that.$common.loadToHide();
					that.$set(that, 'spreadList', res.data);
					that.$set(that, 'poster', res.data[0].wap_poster);					
					that.$db.set("spreadList",res.data);
					that.$db.set("poster",res.data[0].wap_poster);
				})

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #a3a3a3 !important;
	}

	.distribution-posters swiper {
		width: 100%;
		height: 1000rpx;
		position: relative;
		margin-top: 40rpx;
	}

	.distribution-posters .slide-image {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		border-radius: 15rpx;
	}
	
	.distribution-posters {
		position: relative;
	}
	.distribution-posters .fontExplain {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 260rpx;
		height: 260rpx;
	}
	.distribution-posters .fontExplain image {
		width: 100%;
		height: 100%;
	}

	.distribution-posters .slide-image.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.distribution-posters .slide-image.quiet {
		transform: scale(0.8333333);
		transition: all 0.2s ease-in 0s;
	}

	.distribution-posters .keep {
		font-size: 30rpx;
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
	}

	.distribution-posters .preserve {
		color: #fff;
		text-align: center;
		margin-top: 38rpx;
	}

	.distribution-posters .preserve .line {
		width: 100rpx;
		height: 1px;
		background-color: #fff;
	}

	.distribution-posters .preserve .tip {
		margin: 0 30rpx;
	}
</style>
